/**
 * admui-basic v2.1.0 (http://www.admui.com/)
 * Copyright 2015-2019 Admui Team
 * Licensed under the Admui License 1.1 (http://www.admui.com/about/license)
 */
(function() {
  'use strict';

  /* global Chartist, _ */
  /* eslint no-underscore-dangle: ["error", { "allow": ["_node"] }] */

  var ecommercePage = {
    run: function() {
      this.barChart();
      this.scoreChart();
    },
    scoreChart: function() {
      // 创建产品销售图表
      var scoreChartFn = function(id, labelList, series1List, series2List) {
        var scoreChart = new Chartist.Line(
          '#' + id,
          {
            labels: labelList,
            series: [series1List, series2List]
          },
          {
            lineSmooth: Chartist.Interpolation.simple({
              divisor: 2
            }),
            fullWidth: true,
            chartPadding: {
              right: 25
            },
            series: {
              'series-1': {
                showArea: true
              },
              'series-2': {
                showArea: true
              }
            },
            axisX: {
              showGrid: false
            },
            axisY: {
              labelInterpolationFnc: function(value) {
                return value / 1000 + 'K';
              },
              scaleMinSpace: 40
            },
            plugins: [Chartist.plugins.tooltip()],
            low: 0,
            height: 300
          }
        );

        scoreChart
          .on('created', function(data) {
            var defs = data.svg.querySelector('defs') || data.svg.elem('defs');

            var filter = defs.elem(
              'filter',
              {
                x: 0,
                y: '-10%',
                id: 'shadow' + id
              },
              '',
              true
            );

            filter.elem('feBlend', {
              in: 'SourceGraphic',
              mode: 'multiply'
            });

            return defs;
          })
          .on('draw', function(data) {
            var parent;
            var opt = data;

            if (opt.type === 'line') {
              opt.element.attr({
                filter: 'url(#shadow' + id + ')'
              });
            } else if (opt.type === 'point') {
              parent = new Chartist.Svg(opt.element._node.parentNode);
              parent.elem('line', {
                x1: opt.x,
                y1: opt.y,
                x2: opt.x + 0.01,
                y2: opt.y,
                class: 'ct-point-content'
              });
            }
            if (opt.type === 'line' || opt.type === 'area') {
              opt.element.animate({
                d: {
                  begin: 1000 * opt.index,
                  dur: 1000,
                  from: opt.path
                    .clone()
                    .scale(1, 0)
                    .translate(0, opt.chartRect.height())
                    .stringify(),
                  to: opt.path.clone().stringify(),
                  easing: Chartist.Svg.Easing.easeOutQuint
                }
              });
            }
          });
      };

      // 图表参数
      var DayLabelList = [
        '1:00-3:00',
        '3:00-6:00',
        '6:00-9:00',
        '9:00-12:00',
        '12:00-15:00',
        '15:00-18:00',
        '18:00-21:00',
        '21:00-1:00'
      ];
      var DaySeries1List = {
        name: 'series-1',
        data: [2400, 4500, 5000, 6100, 7700, 5000, 1700]
      };
      var DaySeries2List = {
        name: 'series-2',
        data: [1300, 4100, 8000, 4000, 6600, 5600, 3800]
      };

      var WeekLabelList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日', ''];
      var WeekSeries1List = {
        name: 'series-1',
        data: [18000, 37000, 41000, 29000, 58000, 75000, 43000]
      };
      var WeekSeries2List = {
        name: 'series-2',
        data: [30000, 20000, 43000, 68000, 72000, 53000, 66000]
      };

      var MonthLabelList = ['9.1', '9.2', '9.3', '9.4', '9.5', '9.6', '9.7'];
      var MonthSeries1List = {
        name: 'series-1',
        data: [100000, 500000, 300000, 700000, 100000, 200000, 700000]
      };
      var MonthSeries2List = {
        name: 'series-2',
        data: [300000, 400000, 200000, 600000, 800000, 600000, 300000]
      };

      // 时间周期导航条
      var $chartViewNav = $('#chartViewNav');

      // 根据不同时间周期创建图表
      var createChart = function(button) {
        var btn = !_.isUndefined(button) ? button.find('a') : $chartViewNav.find('a.active');
        var chartId = btn.attr('href');

        switch (chartId) {
          case '#scoreLineToDay':
            scoreChartFn('scoreLineToDay', DayLabelList, DaySeries1List, DaySeries2List);
            break;
          case '#scoreLineToWeek':
            scoreChartFn('scoreLineToWeek', WeekLabelList, WeekSeries1List, WeekSeries2List);
            break;
          case '#scoreLineToMonth':
            scoreChartFn('scoreLineToMonth', MonthLabelList, MonthSeries1List, MonthSeries2List);
            break;
          default:
            break;
        }
      };

      createChart();

      // 点击不同时间周期
      $chartViewNav.find('>li').on('click', function() {
        createChart($(this));
      });
    },
    barChart: function() {
      // 收入 - 柱状图
      var barChart = new Chartist.Bar(
        '.barChart',
        {
          labels: ['2月', '3月', '4月', '5月', '6月'],
          series: [[630, 700, 500, 400, 780], [400, 800, 700, 500, 700]]
        },
        {
          axisX: {
            showGrid: false
          },
          axisY: {
            showGrid: false,
            scaleMinSpace: 30
          },
          height: 220,
          seriesBarDistance: 24
        }
      );

      barChart.on('draw', function(data) {
        var parent;
        var opt = data;

        if (opt.type === 'bar') {
          // $("#ecommerceRevenue .ct-labels").attr('transform', 'translate(0 15)');
          parent = new Chartist.Svg(opt.element._node.parentNode);
          parent.elem('line', {
            x1: opt.x1,
            x2: opt.x2,
            y1: opt.y2,
            y2: 0,
            class: 'ct-bar-fill'
          });
        }
      });
    }
  };

  $(function() {
    ecommercePage.run();
  });
})();
